<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人信息提交</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//javascript写法
			window.onload=function(){
				document.getElementById("bu").onclick=function(){
					//获取内容
					var name=document.getElementById("name").value;
					var pass=document.getElementById("pass").value;
					var tel=document.getElementById("tel").value;
					var card=document.getElementById("card").value;
					var email=document.getElementById("email").value;
					
					//设置正则
					var username = /^[\u4E00-\u9FA5A-Za-z]+$/;
					var passa=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;
					var tels=/^1[3456789]d{9}$/;
					var cards=/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
					var emails=/[1-9]\d{7,10}@qq\.com/;
					
					function judgment(){//判断为空
						if(name==""){
							alert("请输入姓名");
						}
						if(pass==""){
							alert("请输入密码");
						}
						if(tel==""){
							alert("请输入手机号");
						}
						if(card==""){
							alert("请输入身份证号");
						}
						if(email==""){
							alert("请输入邮箱");
						}
					}
					function jud(){//正则判断
					if(username.test(name)==false&&name!=""){
						document.getElementById("name").value="";//清空内容
						alert("姓名只能输入中文或英文");
						
						
					}
					if(passa.test(pass)==false&&pass!=""){
						document.getElementById("pass").value="";//清空内容
						alert("密码需包含数字,英文,字符中的两种以上，长度6-20");
						
					}
					if(tels.test(tel)==false&&tel!=""){
						document.getElementById("tel").value="";//清空内容
						alert("手机号码格式不正确");
					}
					if(cards.test(card)==false&&card!=""){
						document.getElementById("card").value="";//清空内容
						alert("身份证号格式不正确");
					}
					if(emails.test(email)==false&&email!=""){
						document.getElementById("email").value="";//清空内容
						alert("邮箱仅支持QQ邮箱");
					}
						
						
					}
					
					
					judgment();//判断为空
					jud();//判断正则
					
					
					
				}
				
				document.getElementById("cancel").onclick=function(){
					window.location.reload();
				}
				
			}
			
			
			
			
			//jQuery写法
		// $(function(){
		// 	$("#bu").on("click",function(){
		// 		//获取内容
		// 		var name=$("#name").val();
		// 		var pass=$("#pass").val();
		// 		var tel=$("#tel").val();
		// 		var card=$("#card").val();
		// 		var email=$("#email").val();
				
		// 		//设置正则
		// 		var username = /^[\u4E00-\u9FA5A-Za-z]+$/;
		// 		var passa=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;
		// 		var tels=/^1[3456789]d{9}$/;
		// 		var cards=/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
		// 		var emails=/[1-9]\d{7,10}@qq\.com/;
				
		// 		function jud(){//正则判断
		// 		if(username.test(name)==false&&name!=""){
		// 			$("#name").val("");//清空内容。亦可同时获取焦点，即.focus()，但此时不必这样
		// 			alert("姓名只能输入中文或英文");
					
		// 		}
		// 		if(passa.test(pass)==false&&pass!=""){
		// 			$("#pass").val("");//清空内容。亦可同时获取焦点，即.focus()，但此时不必这样
		// 			alert("密码需包含数字,英文,字符中的两种以上，长度6-20");
		// 		}
		// 		if(tels.test(tel)==false&&tel!=""){
		// 			$("#tel").val("");//清空内容。亦可同时获取焦点，即.focus()，但此时不必这样
		// 			alert("手机号码格式不正确");
		// 		}
		// 		if(cards.test(card)==false&&card!=""){
		// 			$("#card").val("");//清空内容。亦可同时获取焦点，即.focus()，但此时不必这样
		// 			alert("身份证号格式不正确");
		// 		}
		// 		if(emails.test(email)==false&&email!=""){
		// 			$("#email").val("");//清空内容。亦可同时获取焦点，即.focus()，但此时不必这样
		// 			alert("邮箱仅支持QQ邮箱");
		// 		}
					
					
		// 		}
				
				
		// 		function judgment(){//判断为空
		// 			if(name==""){
		// 				alert("请输入姓名");
		// 			}
		// 			if(pass==""){
		// 				alert("请输入密码");
		// 			}
		// 			if(tel==""){
		// 				alert("请输入手机号");
		// 			}
		// 			if(card==""){
		// 				alert("请输入身份证号");
		// 			}
		// 			if(email==""){
		// 				alert("请输入邮箱");
		// 			}
		// 		}
				
				
				
				
		// 		judgment();//判断为空
		// 		jud();//判断正则
				
		// 	})
		// 	$("#cancel").on("click",function(){
		// 		window.location.reload();
				
				
		// 	})
		
			
		// })
		</script>
	</head>
	<body>
		姓名：<br><input type="text" name="" id="name" value="" /><br>
		密码：<br><input type="password" name="" id="pass" value="" /><br>
		手机号：<br><input type="text" name="" id="tel" value="" /><br>
		身份证号：<br><input type="text" name="" id="card" value="" /><br>
		邮箱：<br><input type="email" name="" id="email" value="" /><br>
		<button type="button" id="cancel">取消</button>
		<button type="button" id="bu">提交</button>
	</body>
</html>
